<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<!-- <view class="text-area"> -->
			<!-- <text class="title">{{title}}</text> -->
			
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item >
								<!-- <view class="swiper-item uni-bg-red">A</view> -->
								<image src="https://img0.baidu.com/it/u=713702890,2814341332&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500" mode=""></image>
							</swiper-item>
							<swiper-item>
								<!-- <view class="swiper-item uni-bg-green">B</view> -->
								<image src="https://img0.baidu.com/it/u=832289482,539266846&fm=253&fmt=auto&app=138&f=JPEG?w=608&h=322" mode=""></image>
							</swiper-item>
							<swiper-item>
								<!-- <view class="swiper-item uni-bg-blue">C</view> -->
								<image src="https://img0.baidu.com/it/u=446258492,190401813&fm=253&fmt=auto&app=138&f=JPEG?w=756&h=500" mode=""></image>
							</swiper-item>
						</swiper>
							<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
							
							<uni-list>
							 	<uni-list-item v-for="item in total" :key='item.id' :title="item.stem" :note="`点赞 ${item.likeCount}  |  浏览 ${item.views}`"   :thumb="item.creatorAvatar"
							 	 thumb-size="lg" ></uni-list-item>
							 	
							</uni-list>
		<!-- </view> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				   background: ['color1', 'color2', 'color3'],
				            indicatorDots: true,
				            autoplay: true,
				            interval: 2000,
				            duration: 500,
							current: 0,
							tabs: [],
							list:[],
							types:[],
							total:[]
			}
		},
		mounted() {
			this.getTabs()
			this.getList(447)
		},
		onLoad() {
			
		},
		methods: {
			changeTab(index) {
				  console.log('当前选中的索引：' + index)
				  const typeid = this.types[index]
				  console.log(typeid);
				  this.getList(typeid)
				  
				
    },
	async getTabs(){
						  const res = await uni.request({
						  	url:'https://api-harmony-teach.itheima.net/hm/question/type',
							method:'GET'
						  })
						  // console.log(res.data)
						  this.tabs = res.data.data.map(item => item.name)
						  this.types  = res.data.data.map(item => item.id)
						  
						
	},
	
	async getList(typeid){
		const res = await uni.request({
			url:`https://api-harmony-teach.itheima.net/hm/question/list?questionBankType=10&type=${typeid}`,
			method:'GET'
		})
		this.total = res.data.data.rows
		// console.log(res.data.data)
	}
	
		}
	}
</script>
<style>
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>
